<template>
  <div class="dingdong-container">
    <div class="goodsImg">
      <div class="title">叮咚抢货</div>
      <img src alt>
    </div>
    <div class="goodsList">
      <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media" v-for="item in goods" :key="item.id">
          <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" v-lazy="item.ImgUrl">
            <div class="mui-media-body">
              <p class="mui-ellipsis title">{{ item.GoodsName }}</p>
              <p class="mui-ellipsis info">{{ item.TjRemark }}</p>
              <p class="yhq">
                <span>优惠券
                  <strong>{{ item.ActMoney }}</strong>元
                </span>
                <span>销量
                  <strong>{{ item.SaleCount }}</strong>
                </span>
              </p>
              <p class="price">
                <span>
                  券后价
                  <strong>￥20</strong>
                </span>
                <button>立即抢购</button>
              </p>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      goods: [] // 用来存放获取到的数据
    };
  },
  created() {
    this.getGoods();
  },
  methods: {
    getGoods() {
      this.$http
        .get(
          "http://api.xuandan.com/DataApi/HotGoods?AppKey=4y0juvewel&type=1&page=1"
        )
        .then(result => {
          //   console.log(result);
          if (result.body.error == 0) {
            this.goods = result.body.data;
          } else {
            Toast("数据获取失败");
          }
        });
    }
  }
};
</script>


<style lang="scss" scoped>
.dingdong-container {
  .goodsImg {
    .title {
      width: 100%;
      height: 40px;
      font-size: 20px;
      text-align: center;
      line-height: 40px;
    }
    img {
      display: block;
      width: 100%;
      height: 150px;
      background: pink;
    }
  }
  .goodsList {
    .mui-media-body p {
      margin: 2px 0;
      line-height: 33px;
    }
    .title {
      font-size: 18px;
      color: #222;
    }
    .info {
      color: orangered;
    }
    strong {
      color: red;
      font-weight: 700;
    }
    .yhq {
      display: flex;
      justify-content: space-between;
    }
    .price {
      display: flex;
      justify-content: space-between;
      button {
        background-color: red;
        color: #fff;
      }
    }
    .mui-table-view .mui-media-object {
      min-width: 140px;
      width: 140px;
      height: 140px;
    }
    image[lazy="loading"] {
      width: 40px;
      height: 300px;
      margin: auto;
    }
    .mui-table-view-cell > a:not(.mui-btn) {
      position: relative;
      display: block;
      overflow: hidden;
      margin: -10px -25px;
      padding: inherit;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: inherit;
    }
  }
}
</style>
